<template>
  <div class="info-box-wrap">
    <div class="info-box">
      <div class="info-title-wrap">
        <div class="info-icon"></div>
        <div class="info-title">{{mainTitle}}</div>
      </div>
      <div class="info-item-two-wrap" v-if="infoType == 'two'">
        <div class="info-item-two" v-for="(item, index) in infoArr" :key="index">
          <div class="info-item-tt">{{item.title}}</div>
          <div class="info-content" v-if="!item.isImg">{{item.content}}</div>
          <div class="info-img-content" v-else>
            <div class="img-wrap">
              <img :src="item.content" alt="图片" />
            </div>
          </div>
        </div>
      </div>
      <div class="info-item-three-wrap" v-if="infoType == 'three'">
        <div class="info-item-three" v-for="(item, index) in infoArr" :key="index">
          <div class="info-item-tt">{{item.title}}</div>
          <div class="info-content" v-if="!item.isImg">{{item.content}}</div>
          <div class="info-img-content" v-else>
            <div class="img-wrap">
              <img :src="item.content" alt="图片" />
            </div>
          </div>
        </div>
      </div>
      <div class="info-item-four-wrap" v-if="infoType == 'four'">
        <div class="info-item-four" v-for="(item, index) in infoArr" :key="index">
          <div class="info-item-tt">{{item.title}}</div>
          <div class="info-content" v-if="!item.isImg">{{item.content}}</div>
          <div class="info-img-content" v-else>
            <div class="img-wrap">
              <img :src="item.content" alt="图片" />
            </div>
          </div>
        </div>
      </div>

      <div class="single-item-wrap" v-if="singleItemArr.length > 0">
        <div class="info-item-two-wrap" v-if="infoType == 'two'">
          <div class="single-item" v-for="(item, index) in singleItemArr" :key="index">
            <div class="info-item-tt">{{item.title}}</div>
            <div class="info-content">{{item.content}}</div>
          </div>
        </div>
        <div class="info-item-three-wrap single-three-wrap" v-if="infoType == 'three'">
          <div class="single-item" v-for="(item, index) in singleItemArr" :key="index">
            <div class="info-item-tt" style="width: 16.2%">{{item.title}}</div>
            <div class="info-content" style="width: 79%">{{item.content}}</div>
          </div>
        </div>
        <div class="info-item-four-wrap" v-if="infoType == 'four'">
          <div class="single-item" v-for="(item, index) in singleItemArr" :key="index">
            <div class="info-item-tt">{{item.title}}</div>
            <div class="info-content">{{item.content}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

// 使用
// _this.infoData1["活动ID"] = data.id;

  // <detail-info-box
  //         infoType="three"
  //         :infoData="infoData1"
  //         mainTitle="活动信息"
  //       />

<script>
export default {
  components: {},
  props: {
    mainTitle: {
      type: String,
    },
    infoType: {
      type: String,
    },
    singleItemData: {
      type: Object,
    },
    infoData: {
      type: Object,
    },
    imgLinkNameArr: {
      type: Array,
    },
  },
  data() {
    return {
      singleItemArr: [],
      infoArr: [],
    };
  },
  mounted() {
    var infoData = this.infoData;
    var singleItemData = this.singleItemData;
    if (!infoData) return;
    for (var item in infoData) {
      if (!infoData[item]) {
        infoData[item] = " - ";
      }
      this.infoArr.push({
        title: item,
        content: infoData[item],
        isImg: false,
      });
      if (this.imgLinkNameArr) {
        this.imgLinkNameArr.forEach((imgItem, idx) => {
          if (imgItem == item) {
            this.infoArr.pop();
            this.infoArr.push({
              title: item,
              content: infoData[item],
              isImg: true,
            });
          }
        });
      }
    }
    for (var item in singleItemData) {
      if (!singleItemData[item]) {
        singleItemData[item] = " - ";
      }
      this.singleItemArr.push({
        title: item,
        content: singleItemData[item],
      });
    }
    // console.log("子组件", this.infoData, this.singleItemData);
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
// @import '~styles/mixins.scss';
// @import '~styles/variables.scss';

.info-box-wrap {
  width: 100%;
  margin-top: 18px;
  .info-box {
    .info-title-wrap {
      height: 35px;
      line-height: 35px;
      margin: 0 20px;
      display: flex;
      align-items: center;
      .info-icon {
        display: inline-block;
        width: 6px;
        height: 20px;
        background-color: #2ad199;
      }
      .info-title {
        display: inline-block;
        margin-left: 10px;
        font-size: 14px;
      }
    }

    .info-item-tt {
      display: inline-block;
      background-color: #f0f0f0;
      line-height: 39px;
      padding: 4px;
      box-sizing: border-box;
      width: 49%;
      font-weight: 700;
      font-size: 14px;
    }

    .info-img-content {
      display: inline-block;
      font-size: 14px;
      width: 49%;
      vertical-align: -15px;
      box-sizing: border-box;
      overflow: hidden;
      .img-wrap {
        width: 40px;
        height: 40px;
        border: 1px solid #ddd;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
          overflow: hidden;
        }
      }
    }

    .info-content {
      display: inline-block;
      font-size: 14px;
      width: 49%;
    }

    .info-item-three-wrap {
      width: 1000px !important;
      overflow-x: auto;
    }

    .info-item-four-wrap {
      width: 1000px !important;
      overflow-x: auto;
    }

    .info-item-two-wrap,
    .info-item-three-wrap,
    .info-item-four-wrap  {
      width: 800px;
      margin-left: 20px;
      border-left: 1px solid #ddd;
      border-top: 1px solid #ddd;

      .info-item-two {
        display: inline-block;
        width: calc(50% - 1px);
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        height: 48px;
        box-sizing: border-box;
      }

      .info-item-three {
        display: inline-block;
        width: calc(33.33% - 1px);
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        height: 48px;
        box-sizing: border-box;
      }

      .info-item-four {
        display: inline-block;
        width: calc(25% - 1px);
        border-top: 1px solid #ddd;
        border-left: 1px solid #ddd;
        height: 48px;
        box-sizing: border-box;
      }
    }

    .single-item-wrap {
      width: 100%;
      .single-item {
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
      }
      .info-item-tt {
        width: calc(25% - 4px);
      }
      .info-content {
        width: 73%;
      }
    }
  }
}

//单一独占
.single-three-wrap {
  border-top: 0 solid #ddd !important;
}
</style>